<template>
	<view class="navbar">
		<view class="navbar-left" @click="$emit('toggle-sidebar')">
			<uni-icons type="bars" size="24" color="#fff"></uni-icons>
		</view>
		<view class="navbar-title">{{title}}</view>
		<view class="navbar-right">
			<!-- 可以添加搜索图标或其他功能图标 -->
			<uni-icons type="search" size="22" color="#fff"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: String
		}
	}
</script>

<style lang="scss" scoped>
	.navbar {
		display: flex;
		align-items: center;
		height: 64px;
		background: linear-gradient(135deg, #3cacff 0%, #38b0ff 100%);
		box-shadow: 0 4px 20px rgba(118, 75, 162, 0.3);
		padding: 0 20px;
		z-index: 100;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 2px;
			background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
		}

		.navbar-left,
		.navbar-right {
			width: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			transition: transform 0.2s ease;

			&:active {
				transform: scale(0.9);
			}
		}

		.navbar-title {
			flex: 1;
			text-align: center;
			font-size: 20px;
			font-weight: 600;
			color: #fff;
			text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			letter-spacing: 0.5px;
		}

		.navbar-right {
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: -10px;
				top: 50%;
				transform: translateY(-50%);
				width: 1px;
				height: 24px;
				background: rgba(255, 255, 255, 0.3);
			}
		}
	}
</style>